<template>
  <div class="mycomponents">
    <div class="components" :class="[comListsStyle]">
      <Form :label-width="100" class="b-a">

        <template v-if="canDragType==1">
          <draggable :clone="cloneData" :list="fields" :options="dragOptions1">
            <div class="com-item" v-for="(com,index) in fields" :key="com.title" @dragstart="dragstart($event,com)" draggable="true">
              <div class="com-item-content">
                <p class="com-item-name">{{com.title}}</p>
                <p class="com-item-count">
                  <i class="iconfont icon-download"></i>
                  {{com.useNumber || 0}}
                </p>
              </div>
            </div>
          </draggable>
        </template>

        <template v-if="canDragType==2">
          <draggable :clone="cloneData" :list="tablefields" :options="dragOptions1">
            <div class="com-item" v-for="(com,index) in tablefields" :key="com.title" @dragstart="dragstart($event,com)" draggable="true">
              <div class="com-item-content">
                <p class="com-item-name">{{com.title}}</p>
                <p class="com-item-count">
                  <i class="iconfont icon-download"></i>
                  {{com.useNumber || 0}}
                </p>
              </div>
            </div>
          </draggable>
        </template>

      </Form>
    </div>
  </div>
</template>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
.mycomponents {
  .box-search {
    .el-input__suffix {
      transform: translateX(-55px) !important;
    }
  }

  .type-select .el-input__suffix {
    transform: none !important;
  }
}
</style>

<style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus">
.mycomponents {
  height: 100%;
  position: relative;
  flex-direction: column;
  display: flex;

  .box-search {
    width: 100%;
    background-color: #3c3a3a;
    padding: 10px;
  }

  .component-menu {
    position: absolute;
    right: 0;
    top: 13px;
    cursor: pointer;

    &:hover {
      i {
        color: #303133;
      }
    }
  }

  .components {
    width: 100%;
    overflow: auto;
    height: 0;
    flex: 1;
    padding-bottom: 5px;
    padding-top: 5px;

    .addComponent {
      text-align: center;
      padding: 10px;
      clear: both;
      float: none;
      display: block;
      color: #faad14;
      font-size: 12px;
      cursor: pointer;
    }

    .com-item {
      position: relative;
      height: 50px;
      padding: 0 10px;
      display: flex;

      &:hover {
        background-color: #6081bd33;
        cursor: pointer;
      }

      .com-item-avatar {
        margin-top: 5px;
        width: 40px;
        height: 40px;

        img {
          overflow: hidden;
          border-radius: 5px;
          width: 90%;
          height: auto;
          vertical-align: bottom;
        }
      }

      .com-item-content {
        height: 50px;
        flex: 1;

        p {
          padding: 0;
          margin: 0;
          font-size: 12px;
          line-height: 1;
          text-align: left;
          margin-left: 5px;
        }

        .com-item-name {
          margin-top: 6px;
          font-size: 14px;
          font-weight: bold;
        }

        .com-item-desc {
          margin-top: 10px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;

          &:hover {
            color: #3899ec;
          }
        }

        .com-item-count {
          position: absolute;
          right: 10px;
          top: 3px;
          color: #00a5e0;
          font-size: 12px;
          transform: scale(0.8);

          i {
            vertical-align: -1px;
          }
        }
      }
    }

    &.card {
      .com-item {
        width: 118px;
        height: 118px;
        overflow: hidden;
        display: block;
        border: 1px solid #505152;
        box-shadow: 0 0 6px 0 rgba(22, 45, 61, 0.27);
        float: left;
        margin-left: 8px;
        margin-bottom: 8px;
        padding: 0;
        text-align: center;
        border-radius: 5px;
        display: block;
        position: relative;

        .com-item-avatar {
          margin: 0;
          width: 100%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            object-position: center center;
            vertical-align: top;
          }
        }

        .com-item-name {
          word-wrap: break-word;
          display: none;
        }

        .com-item-content {
          margin: auto;
          height: auto;

          .com-item-desc {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            white-space: pre-line;
            line-height: 1.3;
            padding: 10px 10px;
            background-color: rgba(0, 0, 0, 0.5);
            margin: 0;
            color: #fff;

            &:hover {
              color: #f9bf4d;
            }
          }

          .com-item-count {
            top: 0;
            right: 1px;
          }
        }
      }
    }
  }
}
</style>

<script type="text/ecmascript-6">
/**
 * 支持的可选组件列表
 */
import BaseComponent from '@/widgets/extend/BaseComponent'
import { mapState } from 'vuex'
import components from '@/widgets/helper/setting/components';
import tableComponents from '@/widgets/helper/setting/tableComponents';
import draggable from "vuedraggable";
import cloneDeep from 'lodash/cloneDeep'

export default {
  mixins: [BaseComponent],
  name: 'Components',
  components: { draggable },
  props: {
  },
  data: function () {
    return {
      components: components,
      tableComponents: tableComponents,
      categoryId: 3,
      searchKey: '',
      selectedTags: [],
      searchType: 1,
      activeNames: ['base', 'container', 'struct'],
      structPanel: ['struct'],
      comLists: [],
      comListsStyle: 'list'
    }
  },
  computed: mapState({
    componentList: state => {
      var array = []
      for (const key in state.componentList) {
        if (state.componentList.hasOwnProperty(key)) {
          const element = state.componentList[key]
          array.push({
            name: key,
            label: element.label,
            child: element.child
          })
        }
      }
      return array
    },
    pageType() {
      return this.$store.state.viewOption.pageType || 0
    },
    fields() {
      return this.components.filter(n => !n.helper)
    },
    tablefields() {
      return this.tableComponents.filter(n => !n.helper)
    },
    // 拖拽表单1
    dragOptions1() {
      return {
        animation: 0,
        ghostClass: "ghost",
        // 分组
        group: {
          name: "shared",
          pull: "clone",
          revertClone: false
        },
        // 禁止拖动排序
        sort: false
      };
    },
    canDragType: function () {
      return this.$route.query.types;
    },
  }),
  watch: {
  },
  mounted() {
    // TODO:先不调用
    // this.search()
    // this.ema.bind('components.refresh', this.search)
  },
  methods: {
    // 克隆,深拷贝对象
    cloneData(original) {
      return cloneDeep(original);
    },
    dragstart: function (ev, menu) {
      console.log(menu)
      ev.dataTransfer.effectAllowed = 'move'
      ev.dataTransfer.setData('componentInfo', JSON.stringify(menu))
      ev.dataTransfer.setData('dragPos', JSON.stringify({
        x: ev.offsetX,
        y: ev.offsetY
      }))
      ev.dataTransfer.setDragImage(ev.target, ev.offsetX, ev.offsetY)
      return true
    }
  }
}
</script>
